import Vue from 'vue'

const app = new Vue({

  // el 对应了beforeMount 和 mounted 两个动作
  // el: '#root',

  template: '<div>{{text}}</div>',
  data: {
    text: 0
  },

  //初始化的时候一定会执行
  // 在初始化的时候是无法做dom操作的
  beforeCreate() {
    console.log(this.$el, 'beforeCreate')
  },
  created() {
    console.log(this.$el, 'created')
  },

  // mount动作发生时
  // 只有mount之后才能做dom操作
  beforeMount() {
    console.log(this.$el, 'beforeMount')
  },
  mounted() {
    console.log(this.$el, 'mounted')
  },

  //值修改动作
  beforeUpdate() {
    console.log(this, 'beforeUpdate')
  },
  updated() {
    console.log(this, 'updated')
  },

  //keepalive相关动作
  activated() {
    console.log(this, 'activated')
  },
  deactivated(){
    console.log(this, 'deactived')
  },

  //组件销毁的时候操作
  beforeDestroy(){
    console.log(this, 'beforeDestroy')
  },
  destroyed(){
    console.log(this, 'destroyed')
  },
  render(h) {

    // 主动报错的时候
    // throw new TypeError('render error')

    console.log('render function invoked')
    return h('div', {}, this.text)
  },

  // 当前组件，调试的时候debug用
  // 子组件的错误他不管, 正式环境不可用
  renderError(h, err){
    return h('div', {}, err.stack)
  },

  // 收集线上的错误，所有子组件的错误都能捕获到
  // 唯一区别是向上冒泡 ，并且正式环境可以使用
  errorCaptured(h, err){
    return h('div', {}, err.stack)
  }
})

//root 来自于 webpack.config.practice.js 中定义的 templte 节点
app.$mount('#root')

// setInterval(() => {
//   app.text = app.text += 1
// }, 1000)

setTimeout(() => {
  //解除所有的事件监听，和所有的watch
  app.$destroy()
}, 1000)
